<template>
  <Layout style="padding:10px;background:#fff;">
    <Row>
      <Col span="6">
      <Card dis-hover :bordered="false" title="设备基本信息" icon="ios-options" :padding="0">
        <span slot="extra">
          <Button size="small" @click="handelEdit" v-if="!isEdit">编辑</Button>
          <Button :disabled="btnDisable" size="small" type="primary" v-if="isEdit" @click="handelSubmit">保存</Button>
        </span>
        <transition name="fade-transverse">
          <CellGroup v-if="!isEdit">
            <Cell title="所属企业：" :extra="baseInfo.companyName" />
            <Cell title="所属区域：" :extra="baseInfo.groupName" />
            <Cell title="设备类型：" :extra="baseInfo.deviceTypeDes" />
            <Cell title="设备名称：" :extra="baseInfo.deviceName" />
            <Cell title="设备别名：" :extra="baseInfo.deviceAlias" />
            <Cell title="设备ID：" :extra="baseInfo.deviceId" />
            <Cell title="设备位置：" :extra="baseInfo.location" />
            <Cell title="IMEI：" :extra="baseInfo.imei" />
            <Cell title="IMSI：" :extra="baseInfo.imsi" />
            <Cell title="是否启用：" :extra="baseInfo.enableState?'是':'否'" />
          </CellGroup>
        </transition>
        <transition name="fade-transverse">
          <div v-if="isEdit" style="padding-top:5px;">
            <deviceForm ref="refEdit" :row="editRow" :isEdit="true" @btnDisable="saveBtnDisable" @save="handleSave" />
          </div>
        </transition>
      </Card>
      </Col>
    </Row>
  </Layout>
</template>
<script>
import { getOdDetail } from "@/api";
import deviceForm from "./deviceForm";
export default {
  props: ["id"],
  components: {
    deviceForm
  },
  data() {
    return {
      isEdit: false,
      baseInfo: {},
      editRow: {},
      btnDisable: false
    };
  },
  mounted() {
    this._getOdDetail();
  },
  watch: {
    id() {
      this._getOdDetail();
    }
  },

  methods: {
    // 编辑
    handelEdit() {
      const vm = this;
      vm.editRow = JSON.parse(JSON.stringify(vm.baseInfo));
      vm.isEdit = true;
    },

    //
    saveBtnDisable(bool) {
      this.btnDisable = bool;
    },
    handleSave() {
      this.isEdit = false;
      this._getOdDetail();
    },

    handelSubmit() {
      this.$refs.refDeviceForm.isValidate();
    },

    _getOdDetail() {
      const vm = this;
      let params = {
        id: vm.id
      };
      getOdDetail(params).then(res => {
        if (res.code == 200) {
          const { data } = res;
          vm.baseInfo = JSON.parse(JSON.stringify(data));
        }
      });
    }
  }
};
</script>
